<template>
<!-- 吃货卡用户记录页面 -->
  <div>
    <el-card>
    <!-- 模糊查框 添加按钮 -->
    <div class="abvoeBox">
        <div style="margin-top:10px;"> <!-- 吃货卡类型名称 开通用户名称 是否已使用-->
            <!-- 吃货卡类型名称 -->
            <span >吃货卡类型名称:</span>
            <el-select v-model="foodieCardTypeId" placeholder="请选择" style="width: 200px;">
                <el-option
                    v-for="item in tableFoodieCardTypeData"
                    :key="item.id"
                    :label="item.foodieCardTypeName"
                    :value="item.id"
                    :disabled="item.disabled">
                </el-option>
            </el-select>
             <!-- 开通用户名称 -->
            <span style="margin-left:20px;">开通用户名称:</span>
            <el-input placeholder="请输入内容" v-model="userName" class="abvoeBox_input"></el-input>
             <!-- 是否已使用 -->
            <span style="margin-left:20px;">是否已使用:</span>
            <template>
                <el-radio v-model="endFlag" label="0" style="margin-left:20px;">未使用</el-radio>
                <el-radio v-model="endFlag" label="1" style="margin-left:20px;">已使用</el-radio>
            </template>
        </div>
        <div> <!-- 开通时间范围 结束时间范围 模糊查 -->
            <!-- 开通时间范围 -->
            <span style="margin-right:20px;">开通时间范围</span>
            <el-date-picker
                v-model="startTime"
                align="right"
                type="date"
                placeholder="选择购买会员开始时间"
                :picker-options="pickerOptions"
                placement="bottom-end">
            </el-date-picker>
            <span style="margin-left:20px;">至</span>
            <el-date-picker
                style="margin-left:20px;"
                v-model="overStartTime"
                align="right"
                type="date"
                placeholder="选择购买会员结束时间"
                :picker-options="pickerOptions"
                placement="bottom-end">
            </el-date-picker>
            <!-- 结束时间范围 -->
            <span style="margin-right:20px;margin-left:20px;">结束时间范围</span>
            <el-date-picker
                v-model="endTime"
                align="right"
                type="date"
                placeholder="选择结束会员开始时间"
                placement="bottom-end">
            </el-date-picker>
            <span style="margin-left:20px;">至</span>
            <el-date-picker
                style="margin-left:20px;"
                v-model="overEndTime"
                align="right"
                type="date"
                placeholder="选择结束会员结束时间"
                placement="bottom-end">
            </el-date-picker>
            <el-button type="primary" @click="selectfoodieCardUserRecordEntityList()" style="margin-left:10px">查询</el-button>
            <el-button type="success" @click="empty()" style="margin-left:10px">清空</el-button>
        </div>

    </div>
    <!-- 全查数据 -->
    <div class="belowBox">
       <el-table
            :data="tableData"
            border
            width=100%
            >
            <el-table-column
            fixed
            prop="userName"
            label="开通用户">
            </el-table-column>
            <el-table-column
            prop="foodieCardTypeName"
            label="吃货卡类型">
            </el-table-column>
            <el-table-column
            prop="foodieCardPrice"
            label="吃货卡价格">
            </el-table-column>
            <el-table-column
            prop="startTime"
            label="开始时间">
            </el-table-column>
            <el-table-column
            prop="endTime"
            label="结束时间">
            </el-table-column>
            <el-table-column
            prop="endFlag"
            label="结束标识">
            <template slot-scope="scope">
                <p>{{scope.row.endFlag===0?"未结束":"已结束"}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="createTime"
            label="创建时间"
            fixed="right">
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div style="margin-top: 20px;">
        <template>
            <div class="block">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 模糊查询（是否已使用）
      endFlag: '',
      // 模糊查询（用户名称）
      userName: '',
      // 模糊查询（吃货卡类型）
      foodieCardTypeId: '',
      // 模糊查询（开始时间起始值）
      startTime: '',
      // 模糊查询（开始时间结束值）
      overStartTime: '',
      // 模糊查询（结束时间起始值）
      endTime: '',
      // 模糊查询（结束时间结束值）
      overEndTime: '',
      // 全查吃货卡类型
      tableFoodieCardTypeData: [],
      // 全查吃货卡类型表数据集
      tableData: [],
      // 分页 （pageSize）一页展示5条数据 （pageNum）当前页
      pageRequest: {
        pageSize: 10,
        pageNum: 1
      },
      // 分页 前往第1页
      currentPage: 1,
      // 分页
      total: 0,
      // 时间选择器默认值
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  mounted () {
    // 全查吃货卡用户记录
    this.selectfoodieCardUserRecordEntityList()
    // 吃货卡类型名称（下拉菜单）
    this.selectFoodieCardTypeList()
  },
  methods: {
    // 清空查询规则，刷新全查
    empty () {
      this.endFlag = ''
      this.userName = ''
      this.foodieCardTypeId = ''
      this.startTime = ''
      this.overStartTime = this.timeSet(new Date())
      this.endTime = ''
      this.overEndTime = this.timeSet('3000-01-01 01:01:01')
      this.selectfoodieCardUserRecordEntityList()
    },
    // 吃货卡类型名称（下拉菜单）
    selectFoodieCardTypeList () {
      this.$axios.get('/eat-service/foodieCardPrice/selectFoodieCardTypeList'
      ).then(res => {
        this.tableFoodieCardTypeData = res.data.obj
      }).catch(error => {
        console.log(error)
      })
    },
    // 设置时间为当天时间为23：59：59
    timeSet (value) {
      const date = new Date(value) // new Date(value*1000);根据时间戳格式进行选择乘1000或否
      let timeDate
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = 23 + ':'
      const m = 59 + ':'
      const s = 59
      timeDate = Y + M + D + h + m + s
      return timeDate
    },
    // 设置时间为当天时间为0:0:0
    timeSet1 (value) {
      const date = new Date(value) // new Date(value*1000);根据时间戳格式进行选择乘1000或否
      let timeDate
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = 0 + ':'
      const m = 0 + ':'
      const s = 0
      timeDate = Y + M + D + h + m + s
      return timeDate
    },
    // 全查吃货卡类型表（模糊查吃货卡类型）
    selectfoodieCardUserRecordEntityList () {
      if (this.startTime === '' || this.startTime === null) {
        this.startTime = ''
      }
      if (this.overStartTime === '' || this.overStartTime === null) {
        this.overStartTime = this.timeSet(new Date())
      }
      if (this.endTime === '' || this.endTime === null) {
        this.endTime = ''
      }
      if (this.overEndTime === '' || this.overEndTime === null) {
        this.overEndTime = this.timeSet('3000-01-01 01:01:01')
      }
      this.$axios.get('/eat-service/foodieCardUserRecord/selectfoodieCardUserRecordEntityList',
        {
          params: {
            endFlag: this.endFlag,
            userName: this.userName,
            foodieCardTypeId: this.foodieCardTypeId,
            startTime: this.startTime,
            overStartTime: this.overStartTime,
            endTime: this.endTime,
            overEndTime: this.overEndTime,
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum
          }
        }
      ).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 分页 每页条数
    handleSizeChange (val) {
      this.pageRequest.pageSize = val
      this.selectfoodieCardUserRecordEntityList()
    },
    // 分页 当前页
    handleCurrentChange (val) {
      this.pageRequest.pageNum = val
      this.selectfoodieCardUserRecordEntityList()
    },
    // 弹窗提示
    myMessage (type, message) {
      this.$message({
        type: type,
        message: message
      })
    }
  }
}
</script>

<style>
    .abvoeBox{
        width: 100%;
        height: 60px;
        text-align: left;
        margin-top: 5px;
        /* background-color: royalblue; */
        /* position: relative; */
    }
    .abvoeBox_input{
        width: 200px;
        height: 50px;
        margin-left: 10px;
        /* position: absolute; */
    }
    .belowBox{
        margin-top: 60px;
    }
</style>
